<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-17 10:13:29
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-08-02 10:33:03
 * @FilePath: \hy-ui\src\plugins\package\penal\other\ElementOtherConfig.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="panel-tab__content">
    <div class="element-property input-property" v-if="type === 'StartEvent'">
      <div class="element-property__label">提交前执行接口：</div>
      <div class="element-property__value">
        <el-input
          v-model="interfaceObj.submit"
          size="mini"
          placeholder="请输入"
          @input="handleInterfaceChange"
        />
      </div>
    </div>
    <div class="element-property input-property" v-if="type === 'StartEvent'">
      <div class="element-property__label">保存前执行接口：</div>
      <div class="element-property__value">
        <el-input
          v-model="interfaceObj.save"
          size="mini"
          placeholder="请输入"
          @input="handleInterfaceChange"
        />
      </div>
    </div>
    <div class="element-property input-property" v-if="type === 'UserTask'">
      <div class="element-property__label">通过前执行接口：</div>
      <div class="element-property__value">
        <el-input
          v-model="interfaceObj.pass"
          size="mini"
          placeholder="请输入"
          @input="handleInterfaceChange"
        />
      </div>
    </div>
    <div class="element-property input-property" v-if="type === 'UserTask'">
      <div class="element-property__label">退回前执行接口：</div>
      <div class="element-property__value">
        <el-input
          v-model="interfaceObj.return"
          size="mini"
          placeholder="请输入"
          @input="handleInterfaceChange"
        />
      </div>
    </div>
    <div class="element-property input-property" v-if="type === 'UserTask'">
      <div class="element-property__label">驳回前执行接口：</div>
      <div class="element-property__value">
        <el-input
          v-model="interfaceObj.reject"
          size="mini"
          placeholder="请输入"
          @input="handleInterfaceChange"
        />
      </div>
    </div>
    <div class="element-property input-property">
      <div class="element-property__label">元素文档：</div>
      <div class="element-property__value">
        <el-input
          type="textarea"
          v-model="documentation"
          size="mini"
          resize="vertical"
          :autosize="{ minRows: 2, maxRows: 4 }"
          @input="updateDocumentation"
          @blur="updateDocumentation"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getNodeInterface } from "@/api/workflow/model";
export default {
  name: "ElementOtherConfig",
  props: {
    id: String,
    type: String,
    getInterfaceList: Function,
    setInterfaceList: Function,
  },
  data() {
    return {
      documentation: "",
      interfaceObj: {},
    };
  },
  watch: {
    id: {
      immediate: true,
      handler: async function (id) {
        if (id && id.length) {
          this.$nextTick(() => {
            const documentations =
              window.bpmnInstances.bpmnElement.businessObject?.documentation;
            this.documentation =
              documentations && documentations.length
                ? documentations[0].text
                : "";
          });
          this.interfaceObj = {};
          const data = await this.getInterfaceList();
          this.interfaceObj = data[id] || {};
          if (!Object.values(this.interfaceObj).length) {
            const res = await getNodeInterface({ taskId: id });
            if (res?.rows?.length) {
              const objData = {};
              res?.rows.forEach((item) => {
                objData[item.optType] = item.apiUrl;
              });
              this.interfaceObj = objData;
            }
            this.setInterfaceList(id, this.interfaceObj);
          }
        } else {
          this.documentation = "";
        }
      },
    },
  },
  methods: {
    async handleInterfaceChange(val) {
      this.setInterfaceList(this.id, this.interfaceObj);
    },
    updateDocumentation() {
      (this.bpmnElement && this.bpmnElement.id === this.id) ||
        (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
      const documentation = window.bpmnInstances.bpmnFactory.create(
        "bpmn:Documentation",
        { text: this.documentation }
      );
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        documentation: [documentation],
      });
    },
  },
  beforeDestroy() {
    this.bpmnElement = null;
  },
};
</script>
